<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询-min-width、max-width</title>
    <style>

        /* 检测视口宽度小于768px的时候，背景颜色设置为蓝色 */
        @media (max-width: 768px) {
            body {
                background-color: blue;
            }
        }

        /*  检测视口宽度大于1200px的时候，背景颜色设置为红色 */
        @media (min-width: 1200px) {
            body {
                background-color: red;
            }
        }
    </style>
</head>
<body>


</body>
</html>
